<template>
  <div class="consumer-page activity-list-page">
    <el-breadcrumb class="breadcrumb page-title" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/schedule' }">Train schedule</el-breadcrumb-item>
      <el-breadcrumb-item>upload excel</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <!--serchBox-->
      <div>
        <el-form label-position="top" size="mini" ref="rul eForm"
                 class="demo-ruleForm main-search-box">

          <!--<el-form-item label="Direction name en">-->
            <!--<el-select @change="getList" style="width: 200px" v-model="directionId" placeholder="">-->
              <!--<el-option v-for="rg in directionNameEns" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->

          <el-form-item label="Route Name" style="width: 200px;">
            <el-select @change="onTrainScheduleSchedule" style="width: 200px" v-model="routeId" placeholder="">
              <el-option v-for="i in idLineOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="Schedule">
            <el-select style="width: 200px"
                       v-model="scheduleId"
                       placeholder="" clearable>
              <el-option v-for="rg in scheduleJson" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="margin-top: 37px;">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              name="file"
              :data="{directionId:directionId, routeId:routeId, scheduleId: scheduleId || ''}"
              :on-preview="handlePreview"
              :auto-upload="true"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-progress="handleProgress"
              :on-success="onUploadSuccess"
              :on-error="onUploadError"
              multiple
              :limit="1"
              :show-file-list="false"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" style="width: 200px;">Upload bus route excel</el-button>
            </el-upload>
          </el-form-item>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>

  import {trainScheduleRoute, trainScheduleSchedule, uploadUrlCommon} from '../../../api/zxy_api'
  import { onTrainDirectionQueryJson } from '../../../api/mgc_api'
  import qs from 'qs';

  export default {
    name: 'ScheduleUploadExcel',
    data() {
      return {
        routeId: '',
        scheduleId: '',
        directionId: '',
        directionNameEns: [],
        idLineOption: [],
        scheduleJson: [],
        fileList: [],
        loading: null,
        uploadUrl: uploadUrlCommon + '/admin/train/schedule/excel-upload'
      }
    },
    methods: {
      // message alert 用于前端错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      getTime(value) {
        if (!value) {
          return ''
        }
        let t = value.substring(0,value.length - 3)
        return t
      },
      getDate(value) {
        if (!value) {
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var ts = H + ':' + i
        return ts
      },
      // onTrainDirection() {
      //   onTrainDirectionQueryJson().then((res) => {
      //     let data = res.data;
      //
      //     // 下拉菜单数据装载
      //
      //     this.directionNameEns = [];
      //
      //     for (let i = 0; i < data.length; i++) {
      //       this.directionNameEns.push({
      //         value: data[i].id,
      //         text: data[i].nameEn
      //       })
      //     }
      //
      //   }).catch((e) => {
      //     console.log(e)
      //   })
      // },
      getList() {
        trainScheduleRoute({directionId: this.directionId}).then((res) => {
          this.idLineOption = [];
          this.routeId = '';

          let data = res.data;

          for (let i = 0; i < data.length; i++) {
            this.idLineOption.push({label: data[i].nameEn, value: data[i].id})
          }

        }).catch((e) => {
          console.log(e)
        })
      },
      onTrainScheduleSchedule() {

        trainScheduleSchedule({routeId: this.routeId}).then((res) => {
          let data = res.data;

          // 下拉菜单数据装载
          this.scheduleJson = [];

          for (let i = 0; i < data.length; i++) {
            this.scheduleJson.push({
              value: data[i].id,
              text: this.getTime(data[i].schedule)
            })
          }

          if (!this.scheduleJson.length > 0) {
            this.scheduleId = null;
          }

        }).catch((e) => {
          console.log(e)
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // 文件上传时候的钩子
      handleProgress() {
        this.loading = this.$loading({
          lock: true,
          text: 'Uploading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        });
      },
      // 文件上传成功的钩子
      onUploadSuccess(response, file, fileList) {
        this.loading.close();
        if (response.errorID == 0) {
          this.fileList = [];
          this.$message({
            showClose: true,
            message: 'success',
            duration: 1500,
            type: 'success'
          })
        } else {
          this.fileList = [];
          this.$message({
            showClose: true,
            message: response.message || 'error',
            duration: 1500,
            type: 'error'
          })
        }
      },
      // 文件上传失败的钩子
      onUploadError(err, file, fileList) {
        this.fileList = [];
        console.log(err, 'err')
      }
    },
    mounted() {
      this.getList()
      // this.onTrainDirection()
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    /*padding-top: 20px;*/
    border-bottom: 1px solid #eee;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .more-box, .list-items-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list-items-box {
    /*margin-right: 10%;*/
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .change-status {
    font-size: 14px;
    margin-right: 10px;
  }

  .options {
    padding: 0px 0 20px 0;
  }

  .container-padding {
    padding: 0 40px;
  }

  .list-notes {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

  .activity-list-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
